<template>
	<div class="page-container">
		<el-card class="page-card" :body-style="{ padding: '24px !important' }">
			<el-table v-loading="loading" stripe :data="list" class="!w-[467px]">
				<el-table-column :formatter="emptyToString" align="center" label="序号" type="index" width="100"> </el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="日期" prop="weekNum" min-width="120">
					<template slot-scope="scope">
						<div v-if="scope.row.weekNum == 7">周日</div>
						<div v-else>{{ '周' + toChinesNum(scope.row.weekNum) }}</div>
					</template>
				</el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="积分数量" prop="integral" min-width="120"> </el-table-column>

				<el-table-column :formatter="emptyToString" align="center" label="操作">
					<template slot-scope="scope">
						<el-button type="primary" @click="handleEdit(scope.row)">编辑 </el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<l-dialog v-model="dialogFormVisible" title="编辑签到积分" width="500px" @close="handleClose" @formSubmit="submit" @formClose="handleClose">
			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
				<el-form-item label="签到名称:" prop="name">
					<el-input v-model.trim="form.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="积分数量:" prop="integral">
					<el-input v-model.trim.number="form.integral" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
		</l-dialog>
	</div>
</template>

<script>
import { editSignSetting, getSignSetting } from '@/api/mall/sgin';

export default {
	name: 'SignSetting',
	data() {
		return {
			loading: false,
			list: [],
			dialogFormVisible: false,
			form: {},
			rules: {
				name: [{ required: true, message: '签到名称不能为空', trigger: 'blur' }],
				integral: [
					{ required: true, message: '排序不能为空' },
					{ type: 'number', message: '排序必须为数字值' },
				],
			},
		};
	},
	created() {
		this.initData();
	},
	methods: {
		submit() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					editSignSetting(this.form).then((res) => {
						this.$message.success('编辑成功!');
						this.initData();
						this.handleClose();
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		handleClose() {
			this.form = {};
			this.$refs['form'].resetFields();
			this.dialogFormVisible = false;
		},
		toChinesNum(num) {
			let changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
			let unit = ['', '十', '百', '千', '万'];
			num = parseInt(num);
			let getWan = (temp) => {
				let strArr = temp.toString().split('').reverse();
				let newNum = '';
				for (var i = 0; i < strArr.length; i++) {
					newNum = (i == 0 && strArr[i] == 0 ? '' : i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ? '' : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i])) + newNum;
				}
				return newNum;
			};
			let overWan = Math.floor(num / 10000);
			let noWan = num % 10000;
			if (noWan.toString().length < 4) {
				noWan = '0' + noWan;
			}
			return overWan ? getWan(overWan) + '万' + getWan(noWan) : getWan(num);
		},
		handleUpdateStatus(row) {
			console.log(row.status);
			let status = row.status == 0 ? 0 : 1;
			editSignSetting({ status, id: row.id }).then((res) => {
				this.$message.success('编辑成功!');
				this.initData();
			});
		},
		initData() {
			getSignSetting({
				pageNum: 1,
				pageSize: 10,
			}).then((res) => {
				this.list = res.data.records;
			});
		},
		handleEdit(row) {
			this.dialogFormVisible = true;
			this.$set(this.form, 'id', row.id);
			this.$set(this.form, 'integral', row.integral);
			this.$set(this.form, 'name', row.name);
		},
	},
};
</script>

<style lang="scss" scoped>
.container {
	padding: 30px;
	background: #ffffff;
	min-height: calc(100vh - 84px);

	.btn {
		width: 150px;
		height: 60px;
		padding: 0;
		line-height: 60px;
		text-align: center;
		font-size: 18px;
	}

	.table {
		max-width: 1122px;
		border-radius: 10px 10px 0px 0px;
	}
}
</style>
